<template>
	<view>
		<view class="examine" v-if="detail.name">
			<view class="mutual-basic">
				<view class="project-name">
					{{detail.name}}
				</view>
				<view class="mutual-other">
					<view class="mutual-lists">
						<view class="mutual-list">
							<text class="num">{{detail.use_quota || 0}}人</text>
							<text>人报名</text>
						</view>
						<view class="mutual-list">
							<text class="num">{{detail.sub_quota || 0}}人</text>
							<text>赚到赏金</text>
						</view>
						<view class="mutual-list">
							<text class="num">{{detail.quota-detail.use_quota || 0}}人</text>
							<text>剩余名额</text>
						</view>
					</view>
					<view class="mutual-money">
						<text>赏{{detail.price || 0}}zkb</text>
					</view>
				</view>
				<view class="title">
					{{detail.title}}
				</view>
				<view class="see">
					<text>浏览次数：{{detail.browse}}</text>
					<text>综合评分：{{detail.evaluate}}</text>
				</view>
			</view>
			<view class="mutual-steps">
				<view class="mutual-title">
					<text>任务步骤</text>
				</view>
				<view class="mutual-step">
					<view class="step" v-for="(item,index) of detail.steps" :key="index">
						<view class="step-title">
							<text>{{index+1}}</text>
							<text>{{item.explain || item.title}}</text>
						</view>
						<view class="step-content" v-if="item.step===4">
							<view class="images">
								<view class="image-1" @click="seeImg(item.pathUrl)">
									<image :src="item.pathUrl" mode="aspectFit"></image>
								</view>
								<view class="image-2 image-right">
									<image @click="seeImg(item.uploadHttpImg)" :src=" item.uploadHttpImg" mode="aspectFit"></image>
								</view>
							</view>
						</view>
						<view class="step-content" v-if="item.step===5">
							<view class="collect">
								<input type="text" v-model="item.uploadValue" disabled :placeholder="item.value">
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="feedback" v-if="isShow">
				<view class="feedback-content">
					<textarea placeholder="请详细说明失败原因" maxlength="100" v-model="fail_content"/>
					<view class="feedback-btns">
						<text @click="isShow=false;fail_content=''">取消</text>
						<text @click="submit('fail')">确定</text>
					</view>
				</view>
			</view>
			<view class="btn">
				<text @click="isShow=true">审核失败</text>
				<text @click="submit('success')">审核通过</text>
			</view>
			<view class="pre" v-show="pre" @click="goPre()">
				<text>上一个</text>
			</view>
			<view class="next" v-show="next" @click="goNext()">
				<text>下一个</text>
			</view>
		</view>
		<view class="nodate" v-else>
			<image src="../../../static/images/no-data.png" mode=""></image>
			<text>恭喜您审核完成了</text>
		</view>
	</view>
</template>

<script>
	import {rewardGet,examine,conductExamine} from "@/api/reward.js"
	import BlockTitle from "@/components/BlockTitle/BlockTitle.vue"
	export default{
		name:"examine",
		components: {
			BlockTitle
		},
		data(){
			return{
				data:[],
				detail:{
					name: "",
				},
				pre:false,
				next:false,
				active:0,
				isShow:false,
				fail_content:""
			}
		},
		onLoad() {
			this.getLists()
		},
		methods:{
			goPage(url){
				uni.navigateTo({
					url:url
				})
			},
			goNext(){
				this.active = this.active+1;
				this.pre = true;
			},
			goPre(){
				this.active = this.active-1;
				this.next = true;
			},
			async getLists(){
				let res = await examine()
				if(res.code === 1){
					res.data.forEach((item,index)=>{
						// item.user_steps = JSON.parse(item.user_steps);
						item.steps = item.user_steps.filter(ite=>{
							return ite.step===4 || ite.step===5
						})
					})
					this.data = res.data;
					if(res.data.length>0){
						this.detail = res.data[0];
						if(res.data.length>1){
							this.next = true
						}
					}else{
						this.detail = {name:""};
					}
					uni.setNavigationBarTitle({
						title:"审核"+"("+this.data.length+")"
					})
				}
			},
			seeImg(url) {
				uni.previewImage({
					current: 0, //预览图片的下标
					urls: [url] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			async submit(type){
				let data = {
					user_id:this.detail.uid,
					action:type,
					id:this.detail.id,
					rid:this.detail.rid,
					fail_content:this.fail_content
				}
				if(type==='fail'){
					if(this.fail_content === ""){
						this.$msg("请输入失败原因")
						return
					}
				}
				let res = await conductExamine(data);
				if(res.code === 1){
					if(type === 'fail'){
						this.isShow = false;
						this.fail_content = "";
					}
					this.data = this.data.filter(item=>{return item.id !== this.detail.id})
					uni.setNavigationBarTitle({
						title:"审核"+"("+this.data.length+")"
					})
					if(this.data.length>0){
						this.active = this.active-1<=0 ? 0 : this.active-1;
						this.detail = this.data[this.active]
						if(this.active===0){
							if(this.data.length>1){
								this.pre = false;
								this.next = true;
							}else{
								this.pre = false;
								this.next = false;
							}
							return
						}
						if(this.data.length-1 === this.active){
							this.next = false;
							this.pre = true;
						}
					}else{
						this.next = false;
						this.pre = false;
						this.detail = {name:""};
					}
				}
			}
		},
		watch:{
			active(newValue){
				this.detail = this.data[newValue];
				if(newValue === 0){
					this.pre = false;
					return;
				}
				if(this.data.length-1 === newValue){
					this.next = false;
				}
			}
		}
	}
</script>

<style scoped lang="less" src="./examine.less"></style>
